import React, { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { SongInfoWrapper } from './style'
import { forMatImageUrl } from '@/utlis/format'
import { useAppDispatch } from '@/store'
import { fetchByIdGetSongDetailAction } from '@/store/modules/audio'

interface IProps {
  children?: ReactNode
  info?: any
  lyricList: any
}

const SongInfo: FC<IProps> = (props) => {
  const { info, lyricList } = props

  const dispatch = useAppDispatch()
  const [isExtend, setIsExtend] = useState(false) // 是否展开歌词

  // 点击播放音乐
  const playSong = () => {
    dispatch(fetchByIdGetSongDetailAction(info?.id))
  }

  return (
    <SongInfoWrapper $isExtend={isExtend}>
      <div className="image">
        <div className="image_top">
          <img className="poster" src={forMatImageUrl(info?.al?.picUrl, 130)} />
          <span className="master sprite_cover"></span>
        </div>

        <div className="link">
          <span className="icon_small music_icon"></span>
          <a href={`https://music.163.com/#/outchain/2/${info?.id}`}>
            生成外链播放器
          </a>
        </div>

        <div className="download">
          <span>下载客户端</span>
        </div>
      </div>

      <div className="info">
        <div className="title">
          <i className="lab icon_small"></i>
          <h3 className="song_name">{info?.name}</h3>
          <i className="mv_icon icon_small"></i>
        </div>

        <div className="des">
          <span className="des_key">歌手:</span>
          {info?.ar && <a className="des_value">{info.ar[0].name}</a>}
        </div>
        <div className="des">
          <span className="des_key">所属专辑:</span>
          <a className="des_value">{info?.al?.name}</a>
        </div>

        <div className="btns">
          <div className="play_btn" onClick={playSong}>
            <div className="play sprite_button">
              <i className="play_icon sprite_button"></i>
              <span>播放</span>
            </div>
            <div className="play_end sprite_button"></div>
          </div>
          <div className="favor">
            <span>收藏</span>
          </div>
          <div className="favor">
            <span>分享</span>
          </div>
          <div className="favor">
            <span>下载</span>
          </div>
          <div className="favor">
            <span>评论</span>
          </div>
        </div>

        <div className="lyric">
          {lyricList.length > 0 &&
            lyricList.map((item: any, index: number) => {
              return (
                <span key={index} className="lyric_item">
                  {item.text}
                </span>
              )
            })}
        </div>

        <div className="extend" onClick={() => setIsExtend(!isExtend)}>
          <span>{isExtend ? '收起' : '展开'}</span>
        </div>
      </div>
    </SongInfoWrapper>
  )
}

export default memo(SongInfo)
